<template>
  <div class="page">
    <!-- 返回 -->
    <div class="mb-16 flex a-c">
      <img @click="backBtn" class="back-icon c-p" src="@/assets/images/public/back-return.png" alt="">
      <div class="ml-16 col-222 f-24 lin-34 bold">
        {{ $t('user.withdrawalRecord') }}
      </div>
    </div>
    <Table :loading="loading" v-if="dataList.length > 0" :columns="columns" :data="dataList">
      <div slot="loading">
        <t-loading></t-loading>
      </div>
      <div slot="status" slot-scope="{ row, index }">
        <div v-if="row.status != 'refusal' && row.status != 'failed'" class="col-888">
          {{ filterStatue(row.status) }}
        </div>
        <div v-else class="col-222 flex a-c">
          {{ filterStatue(row.status) }}
          <Tooltip class="flex a-c" :transfer="true">
            <img class="questionmark-icon c-p ml-12" src="@/assets/images/user/record-questionmark.png" alt="">
            <div slot="content" style="white-space: normal;">
              {{ filterStatue(row.status) }},{{ $t('setting.withdrawRecordReason') }}:{{ row.message }}
            </div>
          </Tooltip>
        </div>
      </div>
      <div slot="detail" slot-scope="{ row, index }">
        <div class="c-p col-ff1 f-14 lin-20" @click="scheduleOpen(row)">
          {{ $t('routerTitle.details') }}
        </div>
      </div>
    </Table>
    <t-no-data v-if="!loading && dataList.length == 0"></t-no-data>
    <div class="page">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
        :page-size="form.pageSize" show-sizer />
    </div>
    <!-- 提现进度 -->
    <record-schedule ref="scheduleRef"></record-schedule>
  </div>
</template>
<script>
import { withdrawList } from "@/api/withdraw";
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import recordSchedule from './record-schedule';

export default {
  components: { TNoData, TLoading, recordSchedule },
  data() {
    return {
      loading: false,
      dataList: [],
      form: {
        expressOrderNo: '', // 运单
        pageNo: 1, // 页
        pageSize: 20, // 页数
        status: '' // 运单状态
      },
      columns: [
        {
          title: this.$t('user.applicationTime'),
          key: 'createTime'
        },
        {
          title: this.$t('user.withdrawalType'),
          key: 'type',
          render: (h, params) => {
            let row = params.row;
            return h('span', {

            }, row.type == 'amount' ? this.$t('user.balanceWithdrawal') : this.$t('user.commissionWithdrawal'));
          }
        },
        {
          title: this.$t('user.withdrawalAmount'),
          render: (h, params) => {
            let row = params.row;
            return h('span', {
              style: {
                color: '#FF186B',
                fontWeight: 600
              }
            }, `CNY${row.amount} ≈ ${row.currency}${row.amountWithRate}`);
          }
        },
        {
          title: this.$t('user.close_channel'),
          key: 'payeeChannelCode'
        },
        // 交易编号
        // {
        //   title: this.$t('user.transactionNumber'),
        //   key: 'transOrderNum'
        // },
        // {
        //   title: this.$t('user.bankName'),
        //   key: 'payeeBank'
        // },
        // {
        //   title: this.$t('user.bankCardNumber'),
        //   key: 'payeeAccount'
        // },
        // {
        //   title: this.$t('user.recipientName'),
        //   key: 'payeeName'
        // },
        {
          title: this.$t('user.status'),
          slot: 'status'
          // fixed: 'right',
          // render: (h, params) => {
          //   let row = params.row;
          //   let statusColor = (row.status == 'audit' || row.status == 'processing') ? '#E76202' : row.status == 'success' ? '#54bb96' : 'f03f3f';
          //   return h('span', {
          //     style: {
          //       color: statusColor
          //     }
          //   }, this.filterStatue(row.status));
          // }
        },
        {
          title: this.$t('user.operation'),
          fixed: 'right',
          slot: 'detail'
        }
      ],
      totalPage: 1
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    filterStatue(type) {
      let typeText = '';
      switch (type) {
        case 'audit':
          typeText = this.$t('user.waitReview')
          break;
        case 'refusal':
          typeText = this.$t('user.refuseWithdraw')
          break;
        case 'processing':
          typeText = this.$t('user.waitingPayment')
          break;
        case 'success':
          typeText = this.$t('setting.withdrawalProcessed')
          break;
        case 'failed':
          typeText = this.$t('setting.withdrawalFailed')
          break;
      }

      return typeText;
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onPage(index) {
      // 下一页
      this.form.pageNo = index;
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      withdrawList(this.form).then((res) => {
        this.dataList = res.result.records;
        this.totalPage = res.result.pages;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    //后退
    backBtn() {
      this.$router.back();
    },
    //进度弹窗显示
    scheduleOpen(item) {
      this.$refs.scheduleRef.open(item);
    }
  }
}
</script>

<style scoped lang="less">
.page {
  border-radius: 20px;
  background: #FFF;
  padding: 30px;
}

.title-wrap {
  display: flex;
  justify-content: space-between;
  color: @t-title-color;
  margin-bottom: 16px;

  .record {
    cursor: pointer;
    color: @primary-color;
    font-size: 14px;
  }
}

.page {
  text-align: right;

  .back-icon {
    width: 32px;
    height: 32px;
  }

  .questionmark-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
}
</style>